<template>
  <!--歌词组件-->
  <div class="lyrics">
    <ul :style="{transform:(times>14?'translateY('+times*-6+'px)':'')}">
      <li v-for="(val,index) in infoText" :key="index" :style="{color:(val.time==times?'#31c27c':'')}">{{val.text}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  naem: "lyrics",
  data(){
    return{
      infoText:null
    }
  },
  props: ["text",'times'],
  methods: {
    analysis() {
      var size = this.text.split("[").length;
      var info = this.text.split("[").slice(1, size);
      var infoText = [];
      info.forEach((val, index) => {
        var obj = {
          time: null,
          text: null
        };
        obj.time = this.second(val.split("]")[0]);
        obj.text = val.split("]")[1];
        infoText.push(obj);
      })
      this.infoText=infoText
    },
    second(number) {
      var Str = number;
      var Temp = Str.split(":");
      var Seconds = 60 * Number(Temp[0]) + Number(Temp[1]);
      return Math.round(Seconds);
    }
  },
  mounted() {
    this.analysis();
    this.second("00:11.66");
  }
};
</script>

<style lang="less" scoped>
.lyrics{
  height: 410px;
  margin: 0 auto;
  text-align: center;
  border: 1px solid #000;
  overflow: hidden;
  ul{
    margin: 0;
    padding: 0;
    transition: all 0.5s;
    li{
      line-height: 24px;
    }
  }
}
</style>